---
title: ธีมที่กำหนดเอง
description: การสร้างธีมที่กำหนดเอง
---

# ธีมที่กำหนดเอง

## การสร้างธีมที่กำหนดเอง

> หมายเหตุ: API นี้ยังไม่เสถียรและอาจมีการเปลี่ยนแปลงในอนาคตอันใกล้ เราแนะนำให้ยึดติดกับ [ธีมที่มีอยู่ในตัว](/docs/theming) ไปก่อนในขณะนี้.

ในขณะที่ธีมที่มีอยู่แบบ built-in ให้ระดับของการกำหนดเองบางอย่าง ประเภท `Theme` นั้นมีไว้เพื่อช่วยให้คุณกำหนดธีมที่กำหนดเองด้วยการเข้าถึงตัวแปรธีมขั้นต่ำสุด.

```tsx
import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit';

const myCustomTheme: Theme = {
  blurs: {
    modalOverlay: '...',
  },
  colors: {
    accentColor: '...',
    accentColorForeground: '...',
    actionButtonBorder: '...',
    actionButtonBorderMobile: '...',
    actionButtonSecondaryBackground: '...',
    closeButton: '...',
    closeButtonBackground: '...',
    connectButtonBackground: '...',
    connectButtonBackgroundError: '...',
    connectButtonInnerBackground: '...',
    connectButtonText: '...',
    connectButtonTextError: '...',
    connectionIndicator: '...',
    downloadBottomCardBackground: '...',
    downloadTopCardBackground: '...',
    error: '...',
    generalBorder: '...',
    generalBorderDim: '...',
    menuItemBackground: '...',
    modalBackdrop: '...',
    modalBackground: '...',
    modalBorder: '...',
    modalText: '...',
    modalTextDim: '...',
    modalTextSecondary: '...',
    profileAction: '...',
    profileActionHover: '...',
    profileForeground: '...',
    selectedOptionBorder: '...',
    standby: '...',
  },
  fonts: {
    body: '...',
  },
  radii: {
    actionButton: '...',
    connectButton: '...',
    menuButton: '...',
    modal: '...',
    modalMobile: '...',
  },
  shadows: {
    connectButton: '...',
    dialog: '...',
    profileDetailsAction: '...',
    selectedOption: '...',
    selectedWallet: '...',
    walletLogo: '...',
  },
};

const App = () => (
  <RainbowKitProvider theme={myCustomTheme} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>;
)
```

### การขยายธีมที่มีอยู่แบบ built-in

คุณสามารถขยายธีมที่มีอยู่โดยไม่ต้องนิยามธีมใหม่ทั้งหมด ฟีเจอร์นี้มีประโยชน์เมื่อคุณต้องการเปลี่ยนแปลงเฉพาะบางโทเค็นธีมเท่านั้น.

เพื่อทำนั้น ติดตั้ง `lodash.merge` (หรือที่เทียบเท่า):

```bash
npm install lodash.merge
```

นำเข้ามาพร้อมด้วยธีมที่คุณต้องการจะขยาย (ตัวอย่างเช่น: `darkTheme`) และประเภท TypeScript `Theme`:

```tsx
import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';
```

จากนั้นรวมธีมที่มีอยู่กับโทเค็นธีมที่คุณต้องการเปลี่ยนแปลง ในตัวอย่างนี้ ฉันกำลังเปลี่ยนแปลงโทเค็น `accentColor` ให้แมทช์กับโทนสีของแบรนด์ฉัน.

```tsx
const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);
```

สุดท้ายนี้ คุณสามารถส่งผ่านธีมที่กำหนดเองของคุณไปยัง `theme` prop ของ `RainbowKitProvider`.

```tsx
const App = () => {
  return (
    <RainbowKitProvider theme={myTheme} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### การสร้าง selector ธีมที่กำหนดเอง

หากแอปของคุณเป็นแบบเซิร์ฟเวอร์/เรนเดอร์ทางสถิต และอนุญาตให้ผู้ใช้สลับธีมเอง ระบบธีมมิ่งของ RainbowKit สามารถเชื่อมต่อกับ CSS selector ที่กำหนดเองได้ด้วยฟังก์ชันต่อไปนี้ ซึ่งสามารถใช้ได้กับระบบ CSS-in-JS ใดๆ:

- `cssStringFromTheme`
- `cssObjectFromTheme`

ฟังก์ชันเหล่านี้จะคืนค่า CSS ที่ตั้งค่าตัวแปรธีมที่จำเป็นทั้งหมด ด้วยการสนับสนุนทั้งแบบ string และ object สิ่งนี้สามารถรวมเข้ากับระบบ CSS-in-JS ใดๆ ได้.

ตัวอย่างเช่นพื้นฐาน คุณสามารถเรนเดอร์ element `style` ของคุณเอง โดยใช้ selecter ที่กำหนดเองสำหรับแต่ละธีม เมื่อเราเป็นผู้ควบคุมการเรนเดอร์ของ CSS ของธีม เราจะส่ง `null` ไปยัง `theme` prop เพื่อให้ RainbowKitProvider ไม่เรนเดอร์สไตล์ใดๆ ให้เรา นอกจากนี้สังเกตการใช้ extends option ในฟังก์ชัน cssStringFromTheme ซึ่งละเว้นตัวแปรธีมใดๆ ที่เหมือนกับธีมพื้นฐาน.

```tsx
import {
  RainbowKitProvider,
  cssStringFromTheme,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider theme={null} {...etc}>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              ${cssStringFromTheme(lightTheme)}
            }

            html[data-dark] {
              ${cssStringFromTheme(darkTheme, {
                extends: lightTheme,
              })}
            }
          `,
        }}
      />

      {/* ... */}
    </RainbowKitProvider>
  );
};
```
